<template>
    <div class="singer-song-list">
        <div class="tools">
            <div class="play-btn" @click="playSongList">
                <Icon class="play-icon" type="ios-play" size="24"/>
                <span>播放全部</span>
            </div>
            <div class="sort">
                <div class="hot-new-btn hot" :class="sortId === 1?'active':''" @click="changeSort(1)"
                     @mousedown="tagMousedown('hot')"
                     @mouseup="tagMouseup('hot')"
                     @mouseleave="tagMouseleave('hot')"
                >
                    最热
                </div>
                <div class="hot-new-btn new" :class="sortId === 5?'active':''" @click="changeSort(5)"
                     @mousedown="tagMousedown('new')"
                     @mouseup="tagMouseup('new')"
                     @mouseleave="tagMouseleave('new')"
                >
                    最新
                </div>
            </div>
        </div>
        <m-song-list v-if="isShow"
                     class="song-list"
                     :songlist="songList"
                     :selectSong="selectSong"
                     :currentPlaySong="currentPlaySong"
                     :playStatus="playStatus"
                     :playList="playList"
                     :options="songListOptions"
                     @selectItem="selectItem"
                     @playSong="playSong"
                     @openMenu="openMenu"
        />
        <m-song-list-skeleton class="song-list-skeleton" v-if="!isShow"/>
        <m-location-play-song v-if="_listHasSong" @location="location"/>
    </div>
</template>

<script>
  import { Icon } from 'view-design'
  import { getSingerSongListData } from '../../../../../../common/js/requestData'
  import { getSign } from '../../../../../../common/js/sign'
  import { getSingerSongList } from '../../../../../../api/singer'
  import { ERR_OK } from '../../../../../../api/config'
  import { _normalizeSongs, listHasSong } from '../../../../../../common/js/util'
  import Loading from '../../../../../../components/loading/loading'
  import { createReqData } from '../../../../../../common/js/createReqData'
  import MLocationPlaySong from '../../../../../../components/m-location-play-song/m-location-play-song'
  import MSongListSkeleton from '../../../../../../components/m-skeleton/m-song-list-skeleton'
  import MSongList from '../../../../../../components/m-song-list/m-song-list'

  export default {
    name: 'song-list',
    components: {
      MSongList,
      MSongListSkeleton,
      MLocationPlaySong,
      Loading,
      Icon
    },
    props: {
      selectSong: {
        type: Object
      },
      currentPlaySong: {
        type: Object
      },
      playStatus: {
        type: Boolean
      },
      playList: {
        type: Array
      },
      scrollTop: {
        type: Number
      },
      scrollHeight: {
        type: Number
      },
      clientHeight: {
        type: Number
      },
      songListTotal: {
        type: Number
      }
    },
    data () {
      return {
        songList: [],
        sortId: 1,
        begin: 0,
        hasSong: false,
        isShow: false,
        songListOptions: {
          showTag: [true, false, true, true],
          width: [55, 0, 40, 60]
        }
      }
    },
    computed: {
      _listHasSong () {
        return listHasSong(this.songList, this.currentPlaySong)
      }
    },
    created () {
      this.initSongList()
    },
    methods: {
      initSongList () {
        this.isShow = false
        let songListData = getSingerSongListData(this.$route.params.singerMid, this.begin, this.sortId, 30)
        let songListSign = getSign(songListData)
        let reqData = createReqData(songListSign, songListData)
        getSingerSongList(reqData).then(res => {
          if (res.code === ERR_OK) {
            this.songList = _normalizeSongs(res.data.songs)
            this.hasSong = this.songListTotal > this.songList.length
          }
          this.isShow = true
        })
      },
      loadMoreSong () {
        this.begin += 30
        let songListData = getSingerSongListData(this.$route.params.singerMid, this.begin, this.sortId, 30)
        let songListSign = getSign(songListData)
        let reqData = createReqData(songListSign, songListData)
        getSingerSongList(reqData).then(res => {
          if (res.code === ERR_OK) {
            this.songList = this.songList.concat(_normalizeSongs(res.data.songs))
            this.hasSong = this.songListTotal > this.songList.length
          }
        })
      },
      changeSort (sortId) {
        if (this.sortId === sortId) {
          return
        }
        this.sortId = sortId
        this.initSongList()
      },
      // 鼠标点击标签时样式改变
      tagMousedown (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(2px,2px,0)'
      },
      tagMouseup (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(0,0,0)'
      },
      tagMouseleave (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(0,0,0)'
      },
      // 定位
      location () {
        let index
        index = this.songList.findIndex((item) => item.id + '' === this.currentPlaySong.id + '')
        let location = 60 * (index + 1)
        this.$emit('location', location)
      },
      selectItem (index) {
        let selectSong = this.songList[index]
        this.$emit('selectItem', selectSong)
      },
      playSong (song) {
        this.$emit('playSong', song)
      },
      openMenu (e, index) {
        let selectSong = this.songList[index]
        this.$emit('openMenu', e, selectSong)
      },
      playSongList () {
        this.$emit('playSongList', 'all', this.songList)
      }
    },
    watch: {
      scrollTop (scrollTop) {
        if (scrollTop + this.clientHeight >= this.scrollHeight - 10) {
          if (this.hasSong) {
            this.loadMoreSong()
          }
        }
      }
    }
  }
</script>

<style lang="less">
    .singer-song-list {
        width: 100%;
        position: relative;
        margin-top: 30px;
        height: 30px;

        .play-btn {
            display: inline-block;
            cursor: pointer;
            position: relative;
            width: 120px;
            height: 30px;
            background-image: linear-gradient(141deg, rgb(17, 224, 246) 0%, rgb(203, 52, 218) 51%, rgb(230, 57, 162) 75%);
            border-radius: 20px;
            text-align: center;
            color: #FFFFFF;

            .play-icon {
                position: relative;
                top: 3px;
            }
        }

        .play-btn:hover {
            background-image: linear-gradient(141deg, rgb(4, 195, 246) 0%, rgb(183, 46, 218) 51%, rgb(230, 34, 164) 75%);
        }

        .sort {
            float: right;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;

            .hot-new-btn {
                margin-left: 10px;
                color: var(--font-tow-color);
            }

            .hot-new-btn:hover {
                cursor: pointer;
                color: var(--font-active-color);
            }

            .active {
                color: var(--font-active-color);
            }
        }

        .song-list {
            margin-top: 20px;
        }

        .song-list-skeleton {
            margin-top: 20px;
        }
    }
</style>
